<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
          生产计划进度详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle title="计划完成度和达成率" class="float margin" style="width: 32.3%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange1" />
            <el-select v-model="top1Form.type" placeholder="请选择" style="width:80px" size="mini" @change="top1FormChange">
              <el-option v-for="item in [{value:'',label:'全部'},{value:'1',label:'追加'},{value:'0',label:'基本'}]" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="flex_center Echarts">
            <PieImg3 :data="top1a" :isLenged="false" itemWidth="0.99" :showTooltip="true" cirLeft="1.6" :showLabel="true" :img="require('@/assets/images/echarts/djdscwc.png')" :color="[
            '#00ebcd',
            '#ff7474']" />
            <div style="width: 100%; height: 100%" class="flex_center">
              <div class="clzdjd_box">
                <div class="clzdjd_item flex_center" v-for="(item, index) in top1b" :key="index">
                  <div class="clzdjd_item_left flex_between">
                    <div class="bigCir flex_center" :style="{
                        border: '1px solid rgba(' + color[index] + ',0.4)',
                      }">
                      <div class="smallCir" :style="{
                          border: '1px solid rgba(' + color[index] + ',1)',
                        }"></div>
                      <div class="border" :style="{ background: 'rgba(' + color[index] + ',1)' }"></div>
                    </div>
                  </div>
                  <div class="clzdjd_item_right flex_center">
                    <div class="lt" :style="{ color: 'rgba(' + color[index] + ',1)' }">
                      {{ item.name }}
                    </div>
                    <div class="rt" :style="{ color: 'rgba(' + color[index] + ',1)' }" v-if="top1b[0].value!=0">
                      {{ item.value }}箱<span :style="{ color: 'rgba(' + color[index] + ',1)!important' }" v-show="index!=0"> / {{parseInt(item.value/top1b[0].value*100)}}%</span>
                    </div>
                    <div class="rt" :style="{ color: 'rgba(' + color[index] + ',1)' }" v-else>
                      {{ item.value }}箱<span :style="{ color: 'rgba(' + color[index] + ',1)!important' }" v-show="index!=0"> / 0%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle title="来源分析" class="float margin" style="width: 32.3%">
          <TwoRow barWidth="6" style="height: 100%" :data="top2"></TwoRow>
        </StrokeTitle>
        <StrokeTitle title="分类统计" class="float margin" style="width: 32.4%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange2" />
            <div class="all_box" style="margin-left:0px" @click="productPlanCount3All">
              全部
            </div>
          </div>
          <XRow class="Echarts" barWidth="6" :data="top3" barLeft="10%" :xAxisShow="false" barRight="22%"></XRow>
        </StrokeTitle>
      </div>
      <div class="content_center">
        <StrokeTitle title="全部计划占比统计" class="float margin" style="width: 32.3%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange3" />
            <div class="all_box" style="margin-left:0px" @click="productPlanCount4All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <PieImg :data="center1" legendLeft="28%" length="5" itemWidth="0.95" cirLeft="0.2" :img="require('@/assets/images/echarts/djdscqb.png')" />
          </div>
        </StrokeTitle>
        <StrokeTitle title="已完成占比" class="float margin" style="width: 32.3%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange4" />
            <div class="all_box" style="margin-left:0px" @click="productPlanCount40All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <PieImg legendLast="()" :data="center2" legendLeft="28%" length="5" itemWidth="0.95" cirLeft="0.2" :img="require('@/assets/images/echarts/djdscwc.png')" />
          </div>
        </StrokeTitle>
        <StrokeTitle title="未完成占比" class="float margin" style="width: 32.4%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange5" />
            <div class="all_box" style="margin-left:0px" @click="productPlanCount41All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <PieImg legendLast="()" :data="center3" legendLeft="28%" length="5" itemWidth="0.95" cirLeft="0.2" :img="require('@/assets/images/echarts/djdscwwc.png')" />
          </div>
        </StrokeTitle>
      </div>
      <div class="content_bottom">
        <StrokeTitle title="近十二个月生产天数统计" class="float margin" style="width: 99%">
          <MoreDirection :data="bottom" gridLeft="10%" gridRight="10%" :isCategory="false" :yAxisLineShow="true" :xAxisLineShow="true" :legendData="['天数']" yUnit="天" barWidth="21" style="height: calc(100% - 0px)" />
        </StrokeTitle>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
import PieImg3 from "@/components/echarts/pie/img3.vue";
import {
  ProductPlanCount1,
  ProductPlanCount2,
  ProductPlanCount3,
  ProductPlanCount4,
  ProductPlanCount5,
  ProductPlanCount6,
  ProductPlanCount7,
} from "@/api/echarts/productionDesign/index";

import TwoRow from "@/components/echarts/bar/twoRow.vue";
export default {
  components: {
    TwoRow,
    PieImg3,
  },
  data() {
    return {
      color: ["35, 195, 255", "0, 235, 205", "255, 116, 116"],
      model: "month",
      //计划完成度
      top1a: [],
      //计划完成度
      top1b: [],
      //计划完成度
      top1Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
        type: "",
      },

      //来源分析
      top2: {},
      //分类统计
      top3: [],
      //分类统计
      top3Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
      },
      //全部计划占比统计
      center1: [],
      center1Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
      },
      //已完成计划占比统计
      center2: [],
      center2Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
        status: "2",
      },
      //未完成计划占比统计
      center3: [],
      center3Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
        status: "1",
      },
      //近十二个月生产天数统计
      bottom: [],
    };
  },
  mounted() {
    this.productPlanCount1();
    this.productPlanCount2();
    this.productPlanCount3();
    this.productPlanCount4();
    this.productPlanCount40();
    this.productPlanCount41();
    this.productPlanCount5();
  },
  methods: {
    //计划完成度
    productPlanCount1() {
      ProductPlanCount1(this.top1Form).then((res) => {
        if (res.code == 200) {
          this.top1a = JSON.parse(JSON.stringify(res.data));
          this.top1a = this.top1a.slice(1);
          this.top1b = JSON.parse(JSON.stringify(res.data));
        }
      });
    },
    //form1类型切换
    top1FormChange() {
      this.productPlanCount1();
    },
    radioChange1(event) {
      this.top1Form.pDateStart = event[0];
      this.top1Form.pDateEnd = event[1];
      this.productPlanCount1();
    },
    //来源分析
    productPlanCount2() {
      ProductPlanCount2().then((res) => {
        if (res.code == 200) {
          var obj = {
            xData: [],
            yData1: [],
            yData2: [],
            yData3: [],
            yData4: [],
            yData5: [],
            yData6: [],
          };
          for (let item of res.data) {
            obj.xData.push(item.name);
            obj.yData1.push(item.value1);
            obj.yData2.push(item.value2);
            obj.yData3.push(item.value3);
            obj.yData4.push(item.value4);
            obj.yData5.push(item.value5);
            obj.yData6.push(item.value6);
          }
          this.top2 = obj;
        }
      });
    },
    //分类统计
    productPlanCount3() {
      ProductPlanCount3(this.top3Form).then((res) => {
        if (res.code == 200) {
          // console.log(3, res);
          this.top3 = res.data;
        }
      });
    },
    //分类统计-全部
    productPlanCount3All() {
      let obj = JSON.parse(JSON.stringify(this.top3Form));
      obj.all = "111";
      ProductPlanCount3(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.tableData.data = res.data;
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.right.unit = "";
        }
      });
    },
    radioChange2(event) {
      this.top3Form.pDateStart = event[0];
      this.top3Form.pDateEnd = event[1];
      this.productPlanCount3();
    },
    //全部计划占比统计
    productPlanCount4() {
      ProductPlanCount4(this.center1Form).then((res) => {
        if (res.code == 200) {
          this.center1 = res.data;
        }
      });
    },
    //全部计划占比统计-全部
    productPlanCount4All() {
      let obj = JSON.parse(JSON.stringify(this.center1Form));
      obj.all = "111";
      ProductPlanCount4(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "%";
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.tableData.column[4].prop = "";
          this.$refs.AllDialog.tableData.data = res.data;
        }
      });
    },
    radioChange3(event) {
      this.center1Form.pDateStart = event[0];
      this.center1Form.pDateEnd = event[1];
      this.productPlanCount4();
    },
    //已完成占比统计
    productPlanCount40() {
      ProductPlanCount6(this.center2Form).then((res) => {
        if (res.code == 200) {
          this.center2 = res.data;
        }
      });
    },
    //已完成占比统计-全部
    productPlanCount40All() {
      let obj = JSON.parse(JSON.stringify(this.center2Form));
      obj.all = "111";
      ProductPlanCount6(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "标准箱";
          this.$refs.AllDialog.tableData.column[3].prop = "value2";
          this.$refs.AllDialog.tableData.data = res.data;
        }
      });
    },
    radioChange4(event) {
      this.center2Form.pDateStart = event[0];
      this.center2Form.pDateEnd = event[1];
      this.productPlanCount40();
    },
    //未完成占比统计
    productPlanCount41() {
      ProductPlanCount7(this.center3Form).then((res) => {
        if (res.code == 200) {
          this.center3 = res.data;
        }
      });
    },
    //未完成占比统计-全部
    productPlanCount41All() {
      let obj = JSON.parse(JSON.stringify(this.center3Form));
      obj.all = "111";
      ProductPlanCount7(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "标准箱";
          this.$refs.AllDialog.tableData.column[3].prop = "value2";
          this.$refs.AllDialog.tableData.data = res.data;
        }
      });
    },
    radioChange5(event) {
      this.center3Form.pDateStart = event[0];
      this.center3Form.pDateEnd = event[1];
      this.productPlanCount41();
    },
    //近十二个月生产计划天数统计
    productPlanCount5() {
      ProductPlanCount5().then((res) => {
        if (res.code == 200) {
          this.top5 = [];
          for (var i = 0; i < res.data.length; i++) {
            let obj = {};
            obj.name = res.data[i].name;
            obj.value1 = res.data[i].value;
            this.bottom.push(obj);
          }
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .content_top,
    .content_bottom,
    .content_center {
      width: 100%;
      height: 35.2%;
      .clzdjd_box {
        width: 100%;
        height: 190px;
        position: relative;
        left: -5%;
        .clzdjd_item {
          height: 100%;
          height: 60px;
          .clzdjd_item_left {
            width: 13%;
            height: 100%;
            position: relative;
            .index {
              position: absolute;
              color: #ffffff;
              left: 0;
              right: 0;
              bottom: 0;
              top: 0;
              margin: auto;
            }

            .bigCir {
              width: 25px;
              height: 25px;
              border: 1px solid #02d5c2;
              border-radius: 50%;
              position: relative;
              left: -0%;
              .smallCir {
                width: 15px;
                height: 15px;
                border: 1px solid #02d5c2;
                border-radius: 50%;
              }
              .border {
                width: 1px;
                height: 20px;
                background: #02d5c2;
                position: absolute;
                top: 130%;
              }
            }
          }
          .clzdjd_item_right {
            width: 70%;
            width: 240px;
            height: 75%;
            // margin-left: 1%;
            max-width: 435px;
            max-height: 124px;
            background: linear-gradient(
              180deg,
              rgba(44, 119, 187, 0.6) 0%,
              rgba(18, 81, 141, 0.6) 100%
            );
            border: 1px solid rgba(52, 134, 218, 0.6);
            font-size: 15px;
            color: #00ebcd;
            .lt {
              width: 40%;
              text-align: left;
            }
            .rt {
              width: 55%;
              padding-left: 0px;
              font-weight: 700;
              text-align: right;
            }
          }
        }
        .clzdjd_item:last-child .border {
          width: 0 !important;
        }
      }
    }
    .content_center {
      height: 31.7%;
    }
    .content_bottom {
      height: 25.7%;
    }
    .Echarts {
      height: calc(100% - 50px);
      .jxb_right {
        width: 260px;
        margin-left: -60px;
        .left {
          display: flex;
          flex-direction: column;
          align-items: center;
          .big_cir {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid #086088;
            .small_cir {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              border: 2px solid #02d5c2;
            }
          }
          .big_cir_blue {
            border: 1px solid #105b95;
            .small_cir_blue {
              border: 2px solid #1c9ad5;
            }
          }
          .and {
            width: 2px;
            height: 20px;
            margin: 8px 0;
            background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -webkit-gradient(
              linear,
              left top,
              left bottom,
              color-stop(0%, #02d5c2),
              color-stop(100%, #1c9ad5)
            );
            background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
          }
        }
        .right {
          .item {
            width: 150px;
            height: 35px;
            border: 1px solid #086088;
            margin: 15px 10px;
            padding: 0 20px;
            .title,
            .number {
              font-size: 13px;
              color: #00ebcd;
            }
            .number {
              font-weight: 700;
            }
          }
          .item_blue {
            border: 1px solid #105b95;
            .title,
            .number {
              color: rgba(35, 195, 255, 1);
            }
          }
        }
      }
    }
  }
}
</style>